<!--发帖界面的附件： 包括本次上传的和之前上传的-->

<script lang="ts" setup>

import NgaImage from "../content/NgaImage.vue";
import {attachCode} from "../../network/types/Reply.ts";
import {Files} from "@element-plus/icons-vue";

interface Props<T> {
  data: T[],
  uri: (t: T) => string,
  filename: (t: T) => string,
  thumbs: (t: T) => string[],
  description?: (t: T) => string | undefined,
  size?: (t: T) => string | undefined,
}

// 删除附件和插入代码事件
const emit = defineEmits(['delete', 'insert'])

const props = defineProps<Props<any>>()

</script>
<template>
  <div style="text-align: start">
    <div v-for="(item, index) in props.data" :key="index" class="nga-attachment inline-block" style="margin-right: 5px">
      <div>
        <el-icon v-if="props.filename(item).endsWith('zip')" size="50px">
          <Files/>
        </el-icon>
        <nga-image v-else :uri="props.uri(item)" class="nga-attachment-thumb"/>
        <div class="inline-block max-width-text " style="max-width: 200px">
          <el-tooltip>
            <template #content>
              {{ props.filename(item) }}
            </template>
            <b>{{ props.filename(item) }}</b>
          </el-tooltip>
          <br v-if="props.description">
          <el-tooltip v-if="props.description">
            <template #content>
              {{ props.description(item) }}
            </template>
            <span>{{ props.description(item) }}</span>
          </el-tooltip>
          <br v-if="props.size">
          <span v-if="props.size">{{ props.size(item) }}</span>
        </div>
      </div>
      <div>
        <el-button-group size="small" type="primary">
          <el-button v-for="(uri,i) in props.thumbs(item)" @click="emit('insert',[attachCode(uri,props.filename(item)),props.filename(item) ])">
            <span v-if="i===props.thumbs(item).length-1">原图</span>
            <span v-else>缩{{ i }}</span>
          </el-button>
          <el-button type="danger" @click="emit('delete',index)">删除</el-button>
        </el-button-group>
      </div>
    </div>
  </div>

</template>

<style scoped>
</style>